<template>
    <div :class="clna">
        <table :cellspacing="spac" :cellpadding="padd" :border="bder" :width="widh+'%'" :height="heit+'%'" :class="tbcn" > <tbody> 

            <tr v-for="(item,i) in data" :key="i" :line="i" >
                <template v-for="(ift,ifd) in item">
                    <template v-if="ift.tp != 'null'">
                        <th 
                            :width="ift.hw ?ift.hw:textVal(ift.nm)" 
                            :valign="ift.vg ? ift.vg : ''" 
                            :align="ift.ha ? ift.ha : 'right'"
                            :class="ift.hc ? ift.hc : ''"
                            :colspan="ift.hl ? ift.hl : ''"
                            :rowspan="ift.hr ? ift.hr : ''"
                            :key="'itth'+'ifd'+ifd"
                        ><span v-if="ift.st" class="red">*</span>{{ ift.nm }}</th>
                    
                    
                    
                        <template v-if="ift.tp == 'radio'">
                            <td 
                                :align="ift.da ? ift.da : ''" 
                                :class="ift.dc ? ift.dc : ''" 
                                :key="'ifd'+ifd" 
                                :colspan="ift.dl ? ift.dl: ''" 
                                :rowspan="ift.dr ? ift.dr : ''" 
                                
                                :width="ift.dw ? ift.dw : ''"> 
                                <!-- :label="radio.id || radio.dicItemCode" -->
                                <el-radio-group v-model="ift.va"  >
                                    <el-radio v-for="(radio) in ift.lt" 
                                        @click.native.prevent="() => {data[i][ifd].va = radio.id || radio.dicItemCode;ift.cf(radio.id || radio.dicItemCode);}" 
                                        :key="radio.id || radio.dicItemCode" 
                                        :label="radio.id || radio.dicItemCode"
                                    >{{radio.name || radio.dicItemName}}</el-radio>
                                </el-radio-group>
                            </td>
                        </template>
                        <template v-else-if="ift.tp == 'input'">
                            <td 
                                :align="ift.da ? ift.da : ''" 
                                :class="ift.dc ? ift.dc : ''" 
                                :key="'ifd'+ifd" 
                                :colspan="ift.dl ? ift.dl: ''" 
                                :rowspan="ift.dr ? ift.dr : ''" 
                                :width="ift.dw ? ift.dw : ''"
                            > 
                                <el-input v-model="ift.va" 
                                    @focus="ift.ff ? ift.ff() : ''" 
                                    :disabled="ift.db ? ift.db : false" 
                                    :placeholder="ift.pe ? ift.pe :'请输入内容'" 
                                    :size="ift.sz ? ift.sz: 'small'" 
                                ></el-input>
                            </td>
                        </template>
                        <template v-else-if="ift.tp == 'textarea'">
                            <td 
                                :align="ift.da ? ift.da : ''" 
                                :class="ift.dc ? ift.dc : ''" 
                                :key="'ifd'+ifd" 
                                :colspan="ift.dl ? ift.dl: ''" 
                                :rowspan="ift.dr ? ift.dr : ''" 
                                :width="ift.dw ? ift.dw : ''"
                            > 
                                <el-input type="textarea" 
                                    :rows="ift.rw ? ift.rw : '1'" 
                                    :disabled="ift.db ? ift.db : false" 
                                    :placeholder="ift.pe ? ift.pe :'请输入内容'" 
                                    v-model="ift.va"> </el-input>
                            </td>
                        </template>
                        <template v-else-if="ift.tp == 'down'">
                            <td 
                                :align="ift.da ? ift.da : ''" 
                                :class="ift.dc ? ift.dc : ''" 
                                :key="'ifd'+ifd" 
                                :colspan="ift.dl ? ift.dl: ''" 
                                :rowspan="ift.dr ? ift.dr : ''" 
                                :width="ift.dw ? ift.dw : ''"
                            > 
                                <el-select 
                                    :size="ift.sz ? ift.sz : 'small'" 
                                    v-model="ift.va"  
                                    @change="ift.cf ? ift.cf : () => {}" 
                                    :placeholder="ift.pe ? ift.pe:'请选择'"
                                >
                                    <el-option v-for="item in ift.lt" :key="item.id" :label="item.name || item.dicItemName" :value="item.id || item.dicItemCode"> </el-option>
                                </el-select>
                            </td>
                        </template>
                        <template v-else-if="ift.tp == 'date'">
                            <td 
                                :align="ift.da ? ift.da : ''" 
                                :class="ift.dc ? ift.dc : ''" 
                                :key="'ifd'+ifd" 
                                :colspan="ift.dl ? ift.dl: ''" 
                                :rowspan="ift.dr ? ift.dr : ''" 
                                :width="ift.dw ? ift.dw : ''"
                            > 
                                <el-date-picker
                                    @change="() => {ift.cf(ift.va)}"
                                    :size="ift.sz ? ift.sz : 'small'" 
                                    v-model="ift.va"
                                    type="date"
                                    :placeholder="ift.pe ? ift.pe:'请选择日期'"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                        </template>
                        <template v-else>
                            <td :class="ift.dc ? ift.dc : ''" :colspan="ift.dl ? ift.dl: ''" :rowspan="ift.dr ? ift.dr : ''" :key="'ifd'+ifd" v-if="Array.isArray(ift.va) " :width="ift.dw ? ift.dw : ''"> 
                                <span v-for="(itListVal,index) in ift.va" :key="'tilistval' +index"> {{ itListVal | dataAddMark(index) }} </span>
                            </td>
                            <td :class="ift.dc ? ift.dc : ''" :colspan="ift.dl ? ift.dl: ''" :rowspan="ift.dr ? ift.dr : ''" v-else :key="'ifd'+ifd" :width="ift.dw ? ift.dw : ''">
                                {{ift.va}}
                            </td>
                        </template>
                    </template>
                    <template v-else>
                        <td :key="'itth'+'ifd'+ifd"></td><td :key="'ittd'+'ifd'+ifd"></td>
                    </template>
                </template>
            </tr> 
            <slot></slot>

        </tbody> </table>
    </div>
</template>

<script>
    import vtp from '../ua-vtp/index'
    import '../ua-filter/index'
    export default {
        name:"ua-infotable",
        props:{
            bder:{
                type:Number,
                default:0,
            },
            spac:{
                type:Number,
                default:0,
            },
            padd:{
                type:Number,
                default:0
            },
            data : {
                type:Array,
                default : () => {return [
                    {link:'1',list:[]}
                ]},
            },
            clna:{
                type:String,
                default: ""
            },
            tbcn:{
                type:String,
                default: ""
            },
            widh:{
                type:Number,
                default: 100
            },
            heit:{
                type:Number,
                default: 100
            },
        },
        data(){
            return {

            }
        },
        mounted(){
            
            // console.log(this);
        },
        methods: {
            textVal(o){
                return vtp.strToNum(o);
            }
        },
        watch:{
            data:{
                handler() {
                    // this.formItem.templateList[this.order].value = this.formItem.templateList[this.order].busiRegCityName
                        // +'/'+this.formItem.templateList[this.order].busiRegCountyName+this.formItem.templateList[this.order].busiRegGridName
                },
                deep: true
            }
            
        },
        
    };
</script>
<style lang="scss">
    th{padding-right: 2px;position: relative;font-weight: 10;
        &:after{content:"：";display: inline;}
    };
</style>

